import React, {Component} from 'react';
import axios from "../../../utils/request";

class Songs extends Component {
    niskyMusicPlayer = window.niskyMusicPlayer;
    state = {
        nowSong:{},
        songs:[],

    }
    async componentDidMount() {
        this.search();
    }

    render() {
        return (
            <div>
                <ul>
                    {
                        this.state.songs.map((e)=>
                            <li key={e.id}>
                                <span>{e.name}</span>
                                <span>{e?.ar[0]?.name}</span>
                                <button onClick={()=>{this.playMusic(e)
                                }
                                }>点击播放</button>
                            </li>
                        )
                    }
                </ul>
            </div>
        );
    }
    search = async ()=>{
        let key = this.props.history.searchParams.get("keyword")
        let res = await axios.get("/cloudsearch",{
            params:{
                keywords:key
            }
        })
        // console.log(res)
        if(res.data.code===200){
            this.setState({
                songs:res.data.result.songs
            })
        }
    }
    playMusic = async (e)=>{
        let res = await axios.get("/song/url",{
            params:{
                id:e.id
            }
        })
        let song = res.data.data[0];
        // console.log(song)
        let index = this.niskyMusicPlayer.addSong({
            title:e.name,
            artists: e.ar,
            src:song.url,
            imgUrl:e?.al?.picUrl
        })

        this.niskyMusicPlayer.playByIndex(index);
    }
}

export default Songs;